import { dayjs } from "element-plus";
import { getCurrentInstance, defineComponent, ComponentInternalInstance } from "vue";
export default defineComponent({
	props: {
		timeRange: {
			type: Array,
			default: () => {
				return [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")];
			}
		}
	},
	emits: ["update:timeRange"],
	setup(props, { emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const radio = ref("7");
		const changeDate = () => {
			state.timeRange = [dayjs().add(-Number(radio.value), "d").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")];
		};
		const state = reactive<any>({
			timeRange: props.timeRange
		});
		// onMounted(() => {
		// 	state.timeRange = props.timeRange;
		// });
		watch(
			() => state.timeRange,
			() => {
				emit("update:timeRange", state.timeRange);
			}
		);
		const shortcuts = [
			{
				text: proxy?.$t("alarm_cardhead.shortcuts.week"),
				value: () => {
					return [dayjs().add(-7, "d").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")];
				}
			},
			{
				text: proxy?.$t("alarm_cardhead.shortcuts.month"),
				value: () => {
					return [dayjs().add(-30, "d").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")];
				}
			},
			{
				text: proxy?.$t("alarm_cardhead.shortcuts.three_months"),
				value: () => {
					return [dayjs().add(-90, "d").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")];
				}
			},
			{
				text: proxy?.$t("alarm_cardhead.shortcuts.six_months"),
				value: () => {
					return [dayjs().add(-180, "d").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")];
				}
			}
		];
		return () => {
			return (
				<div class="flex justify-end card-head items-center">
					{/* <el-radio-group v-model={radio.value} onChange={changeDate}>
						<el-radio-button label="7">7天</el-radio-button>
						<el-radio-button label="30">30天</el-radio-button>
					</el-radio-group> */}
					<el-radio-group v-model={radio.value} onChange={changeDate} size="default">
						<el-radio-button label="7" border>
							{proxy?.$t("alarm_cardhead.btn.7day")}
						</el-radio-button>
						<el-radio-button label="30" border>
							{proxy?.$t("alarm_cardhead.btn.30day")}
						</el-radio-button>
					</el-radio-group>
					<div class="ml-4">
						<el-date-picker
							size="default"
							style="width:250px"
							v-model={state.timeRange}
							type="daterange"
							shortcuts={shortcuts}
							unlink-panels
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							start-placeholder={proxy?.$t("alarm_cardhead.select_time.start")}
							end-placeholder={proxy?.$t("alarm_cardhead.select_time.end")}
						/>
					</div>
				</div>
			);
		};
	}
});
